<template>
  <div class="divBox">
    <el-card class="box-card">
      <div class="components-container">
        <el-form ref="pram" label-width="150px" :model="pram">
          <el-form-item
            label="标题"
            prop="fileName"
            :rules="[
              {
                required: true,
                message: '请填写标题',
                trigger: ['blur', 'change'],
              },
            ]"
          >
            <el-input v-model="pram.fileName" placeholder="标题" maxlength="100" />
          </el-form-item>
          <el-form-item label="类型" 
            prop="type"
            :rules="[
              {
                required: true,
                message: '请选择类型',
                trigger: ['blur', 'change'],
              },
            ]">
            <el-select
              v-model="pram.type"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in categoryTreeData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="文章内容"
            prop="content"
            :rules="[
              {
                required: true,
                message: '请填写文章内容',
                trigger: ['blur', 'change'],
              },
            ]"
          >
            <ueditor-from v-model="pram.content" :content="pram.content" />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :loading="loading"
              @click="handerSubmit('pram')"
              >保存</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import Tinymce from "@/components/Tinymce/index.vue";
import * as agreementApi from "@/api/agreement.js";
import { getToken } from "@/utils/auth";
export default {
  name: "AgreementCreat",
  components: { Tinymce },
  data() {
    return {
      loading: false,
      constants: this.$constants,
      categoryTreeData: [
        { id: 1, name: "隐私政策" },
        { id: 2, name: "用户服务" },
      ],
      pram: {
        belong: 0,
        id: 0,
        isDel: 0,
        type: null,
        fileName: '',
        content: '',
      },
      editData: {},
      myHeaders: { "X-Token": getToken() },
    };
  },
  created() {
    this.tempRoute = Object.assign({}, this.$route);
    if (this.$route.params.id) {
      this.getInfo();
      this.setTagsViewTitle();
    }
  },
  mounted() {
  },
  methods: {
    getInfo() {
      agreementApi.InfoAgreement( this.$route.params.id ).then((data) => {
        this.editData = data;
        this.hadlerInitEditData();
      });
    },
    hadlerInitEditData() {
      if (!this.$route.params.id) return;
      const {
        belong,
        id,
        isDel,
        type,
        fileName,
        content,
      } = this.editData;
      this.pram.belong = belong;
      this.pram.id = Number.parseInt(id);
      this.pram.isDel = isDel;
      this.pram.type = type;
      this.pram.fileName = fileName;
      this.pram.content = content;
    },
    handerSubmit(form) {
      this.$refs[form].validate((valid) => {
        if (!valid) return;
        if (!this.$route.params.id) {
          this.handlerSave();
        } else {
          this.handlerUpdate();
        }
      });
    },
    handlerUpdate() {
      this.loading = true;
      agreementApi
        .UpdateAgreement(this.pram)
        .then((data) => {
          this.$message.success("编辑成功");
          this.loading = false;
          this.$router.push({ path: "/agreement/agreementList" });
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handlerSave() {
      this.loading = true;
      agreementApi
        .AddAgreement(this.pram)
        .then((data) => {
          this.$message.success("新增成功");
          this.loading = false;
          this.$router.push({ path: "/agreement/agreementList" });
        })
        .catch(() => {
          this.loading = false;
        });
    },
    setTagsViewTitle() {
      const title = "编辑";
      const route = Object.assign({}, this.tempRoute, {
        title: `${title}-${this.$route.params.id}`,
      });
      this.$store.dispatch("tagsView/updateVisitedView", route);
    },
  },
};
</script>

<style scoped>
</style>
